<!-- eslint-disable @typescript-eslint/quotes -->
<script setup lang="ts">
import "@wangeditor/editor/dist/css/style.css"; // 引入 css
import { IToolbarConfig, IEditorConfig } from "@wangeditor/editor";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { getToken } from "@/utils/localToken";
import { imgApiUrl } from "@/services/upload";
const props = defineProps({
	modelValue: {
		type: String,
		default: "",
	},
});

const emit = defineEmits<{
	(e: "update:modelValue", value: string): void;
}>();

const model = computed({
	get() {
		return props.modelValue;
	},
	set(val) {
		emit("update:modelValue", val);
	},
});
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef();
const mode = "default";
const toolbarConfig: Partial<IToolbarConfig> = {
	excludeKeys: [""], // 排除掉空的按钮
	toolbarKeys: [
		"headerSelect", // 标题
		"blockquote", // 引用
		"bold", // 加粗
		"underline", // 下划线
		"italic", // 斜体
		"through", // 删除线
		//"code", // 代码块
		"sup", // 上标
		"sub", // 下标
		"color", // 颜色
		"bgColor", // 背景色
		{
			key: "group-justify",
			title: "对齐",
			iconSvg:
				'<svg viewBox="0 0 1024 1024"><path d="M768 793.6v102.4H51.2v-102.4h716.8z m204.8-230.4v102.4H51.2v-102.4h921.6z m-204.8-230.4v102.4H51.2v-102.4h716.8zM972.8 102.4v102.4H51.2V102.4h921.6z"></path></svg>',
			menuKeys: ["justifyLeft", "justifyCenter", "justifyRight", "justifyJustify"],
		},
		{
			key: "group-indent",
			title: "缩进",
			iconSvg:
				'<svg viewBox="0 0 1024 1024"><path d="M0 64h1024v128H0z m384 192h640v128H384z m0 192h640v128H384z m0 192h640v128H384zM0 832h1024v128H0z m0-128V320l256 192z"></path></svg>',
			menuKeys: ["indent", "delIndent"],
		},
		"divider", // 分割线
		"emotion", // 表情
		//"codeBlock", // 插入代码块
		"fontSize", // 字体大小
		"fontFamily", // 字体
		"lineHeight", // 行高
		"bulletedList", // 无序列表
		"numberedList", // 有序列表
		//"todo", //	任务列表

		"insertLink", // 插入链接
		{
			key: "group-image",
			title: "图片",
			iconSvg:
				'<svg viewBox="0 0 1024 1024"><path d="M959.877 128l0.123 0.123v767.775l-0.123 0.122H64.102l-0.122-0.122V128.123l0.122-0.123h895.775zM960 64H64C28.795 64 0 92.795 0 128v768c0 35.205 28.795 64 64 64h896c35.205 0 64-28.795 64-64V128c0-35.205-28.795-64-64-64zM832 288.01c0 53.023-42.988 96.01-96.01 96.01s-96.01-42.987-96.01-96.01S682.967 192 735.99 192 832 234.988 832 288.01zM896 832H128V704l224.01-384 256 320h64l224.01-192z"></path></svg>',
			menuKeys: ["insertImage", "uploadImage"],
		},
		"insertTable", // 插入表格
		"clearStyle", // 清除样式
		"undo", //	撤销
		// "redo", //	重做
		"fullScreen", // 全屏
	],
};
const editorConfig: Partial<IEditorConfig> = {
	readOnly: false,
	placeholder: "请输入内容...",
	MENU_CONF: {
		uploadImage: {
			fieldName: "files",
			allowedFileTypes: ["image/*"],
			headers: {
				Authorization: `Bearer ${getToken()}`,
			},
			withCredentials: true,
			server: imgApiUrl,
			customInsert(res: any, insertFn: any) {
				const url = res.data[0];
				insertFn(url);
			},
		},
	},
};

const handleCreated = (editor: any) => {
	editorRef.value = editor; // 记录 editor 实例，重要！
};

const handleKeyup = (e: { key: string }) => {
	try {
		if (e.key === "Escape") {
			const editor = editorRef.value;
			if (editor && typeof editor.unFullScreen === "function") {
				editor.unFullScreen(); // 确保 editor 实例存在且 unFullScreen 方法可用
			}
		}
	} catch (error) {
		console.error("Error while attempting to exit full screen:", error); // 捕获并记录错误
	}
};

// 添加键盘事件监听
document.addEventListener("keyup", handleKeyup);

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
	document.removeEventListener("keyup", handleKeyup);
	const editor = editorRef.value;
	if (editor == null) return;
	editor.destroy();
});
</script>

<template>
	<div style="z-index: 1000; border: 1px solid #cccccc">
		<Toolbar style="border-bottom: 1px solid #cccccc" :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode" />
		<Editor
			style="height: 380px; overflow-y: hidden"
			v-model="model"
			:defaultConfig="editorConfig"
			:mode="mode"
			@on-created="handleCreated"
		/>
	</div>
</template>
